<script setup>
import { ref, createVNode, onMounted } from 'vue';
import { Modal } from 'ant-design-vue';
import { PlusOutlined, CloseOutlined, GroupOutlined } from '@ant-design/icons-vue';

const emits = defineEmits(['drawing']);
const props = defineProps({
  mapdata: { type: Object, required: true },
});

const stages = ref([]); // 地块列表
const current = ref(-1); // 当前选中的地块索引
const drawing = ref(false); // 是否正在绘制地块中

onMounted(() => {
  /** @监听 数据变化 */
  props.mapdata.addListener('data', (data) => (stages.value = data.stages));
  /** @监听 选中变化 */
  props.mapdata.addListener('selected', ({ index }) => (current.value = index));
});

/** @事件 选中地块 */
function onSelected(index) {
  index = index === current.value ? -1 : index;
  props.mapdata.dispatch('selected', { index });
}

/** @事件 添加地块 */
function onCreate() {
  Modal.confirm({
    title: '是否要添加地块?',
    icon: createVNode(GroupOutlined),
    content: '（各种输入框关联土地）添加地块后进入绘图模式开始绘制地块',
    onOk() {
      // 添加地块
      const list = stages.value;
      list.push({
        code: list.length + 1,
        name: `地块#${list.length + 1}`,
        color: GetColor(),
        polygon: [],
      });
      props.mapdata.dispatch('data:stages', list);
      // 进入绘图模式
      drawing.value = true;
      emits('drawing', (state) => {
        drawing.value = false;
        state === false && stages.value.pop();
        props.mapdata.dispatch('data:stages', stages.value);
        console.log('--> ', JSON.stringify(stages.value[stages.value.length - 1]) + ',');
      });
    },
  });
}

/** @方法 删除地块 */
function onDelete(index) {
  Modal.confirm({
    title: '是否要删除地块?',
    icon: createVNode(GroupOutlined),
    content: '删除地块后不可恢复',
    onOk() {
      stages.value.splice(index, 1);
      props.mapdata.dispatch('data:stages', stages.value);
    },
  });
}

/** @辅助 获取随机颜色 */
function GetColor() {
  const excludes = stages.value.map((vo) => vo.color);
  const hsvToRgb = (h, s, v) => {
    let r, g, b;
    let i = Math.floor(h * 6);
    let f = h * 6 - i;
    let p = v * (1 - s);
    let q = v * (1 - f * s);
    let t = v * (1 - (1 - f) * s);

    switch (i % 6) {
      case 0:
        (r = v), (g = t), (b = p);
        break;
      case 1:
        (r = q), (g = v), (b = p);
        break;
      case 2:
        (r = p), (g = v), (b = t);
        break;
      case 3:
        (r = p), (g = q), (b = v);
        break;
      case 4:
        (r = t), (g = p), (b = v);
        break;
      case 5:
        (r = v), (g = p), (b = q);
        break;
    }
    return `rgb(${Math.round(r * 190)}, ${Math.round(g * 190)}, ${Math.round(b * 190)})`;
  };
  do {
    let color = hsvToRgb(Math.random(), 0.5, 0.95);
    if (excludes.includes(color) === false) {
      return color;
    }
  // eslint-disable-next-line no-constant-condition
  } while (true);
}
</script>

<template>
  <div class="MapStages">
    <!-- 操作指南 -->
    <div class="MapStages--mask" v-if="drawing">
      <div class="MapStages--key">
        <span>绘制</span>
        <span>鼠标左键</span>
      </div>
      <div class="MapStages--key">
        <span>撤销</span>
        <span>鼠标右键</span>
      </div>
      <div class="MapStages--key">
        <span>缩放</span>
        <span>鼠标滚轮</span>
      </div>
      <div class="MapStages--key">
        <span>拖动</span>
        <span>空格</span>
        <span>+</span>
        <span>鼠标左键</span>
      </div>
    </div>
    <!-- 土地列表 -->
    <div class="MapStages--body">
      <!-- 添加按钮 -->
      <div class="MapStages--item MapStages--plus" @click="onCreate">
        <PlusOutlined />
        <div class="MapStages--item_name">添加地块</div>
      </div>
      <!-- 土地模块 -->
      <div
        v-for="(vo, vi) in stages" :key="vi"
        :class="['MapStages--item', current === vi ? 'MapStages--active' : '']"
        @click="onSelected(vi)"
      >
        <CloseOutlined class="MapStages--item_close" @click.stop="onDelete(vi)" />
        <div class="MapStages--item_color" :style="{ background: vo.color }"></div>
        <div class="MapStages--item_name">{{vo.name}}</div>
      </div>
    </div>
  </div>
</template>

<!-- 允许自定义宽高通过CSS进行控制 -->
<style scoped>
.MapStages {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}
/* 操作指南 */
.MapStages--mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.MapStages--key + .MapStages--key {
  margin-top: 20px;
}
.MapStages--key span:first-child, .MapStages--key span:nth-child(2n+1) {
  font-size: 18px;
  font-weight: bold;
  padding: 0 10px;
}
.MapStages--key span:nth-child(2n) {
  background-color: white;
  border: 1px solid #d9d9d9;
  color: #7f7f7f;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 15px;
}
/* 地块列表 */
.MapStages--body {
  display: flex;
  flex-wrap: wrap;
}
.MapStages--item {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.MapStages--item:last-child {
  margin-right: 0;
}
.MapStages--plus > span {
  font-size: 28px;
  color: #7f7f7f;
}
.MapStages--item_color {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background-color: #5c8d61;
}
.MapStages--item_close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px;
  font-weight: bolder;
  color: #ff0000;
}
.MapStages--item_name {
  margin-top: 8px;
  font-size: 14px;
  color: #7f7f7f;
  user-select: none;
}
/* 点击地块 */
.MapStages--active {
  border-color: #5c8d61;
  background-color: #eaffec;
}
</style>